<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="600px"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    :title="state.title"
  >
    <template v-slot:dialogMain>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
          <el-form-item label="数据集名称">
            <el-input v-model="ruleForm.dataSourceName" />
          </el-form-item>
          <el-form-item label="关联">
            <el-input v-model="ruleForm.dataSourceName" />
          </el-form-item>
          <el-form-item label="字段配置">
            <el-input
              v-model="ruleForm.dataSourceDesc"
              type="textarea"
              :rows="5"
            />
          </el-form-item>
          <el-form-item v-model="ruleForm.driverType" label="表详情信息">
            <div style="width: 100%">
              <hsa-table v-bind="tableOption" />
            </div>
          </el-form-item>
          <el-form-item v-model="ruleForm.dataSourceIp" label="数据探索">
            <el-input
              v-model="ruleForm.dataSourceDesc"
              type="textarea"
              :rows="5"
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import { onMounted, computed, reactive, toRefs, ref, h } from "vue";

import {
  type ComponentSize,
  type FormInstance,
  type FormRules,
  ElMessage,
  ElInput,
} from "element-plus";
const myDialog = ref(null);

const ruleFormRef = ref<FormInstance>();

const emit = defineEmits(["sureHandle"]);

const ruleForm = ref({
  dataSourceName: "",
  dataSourceDesc: "",
  driverType: "",
  dataSourceIp: "",
  port: "",
  userName: "",
  password: "",
});
// 表格配置
const tableOption = reactive({
  data: ref<any[]>([
    {
      cnName: "王小虎",
      enName: "wxh",
    },
    {
      cnName: "王小龙",
      enName: "wxl",
    },
  ]),
  showIndex: true,
  paginationEnable: false,
  columns: ref<HsaTableColumn[]>([
    {
      align: "center",
      label: "表中文",
      prop: "cnName",
      render: (scope) => {
        return h(ElInput, { modelValue: scope.cnName, 'onUpdate:modelValue': (val) => {scope.cnName=val} });
      },
    },
    { align: "center", label: "表英文名", prop: "enName",
    render: (scope) => {
        return h(ElInput, { modelValue: scope.enName, 'onUpdate:modelValue': (val) => {scope.enName=val} });
      },
     },
  ]),
});
let state = reactive({
  title: "",
});
// 定义完成后，用defineExpose()暴露给父组件
const open = (title: string, data: any) => {
  resetForm();
  state.title = title;
  if (data) {
    console.log(data, "111");
    ruleForm.value = Object.assign({}, { ...data });
  }
  myDialog.value.handleOpen();
};
const close = () => {
  myDialog.value.handleClose();
};
const sureHandle = () => {
  submitForm();
};
defineExpose({
  open,
  close,
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  await ruleFormRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(tableOption.data, "submit!");
    //   console.log(Object.assign({}, { ...ruleForm.value }), "submit!");
      // console.log(toRefs(ruleForm), "submit!");
    //   ElMessage({
    //     type: "success",
    //     message: state.title + "成功!",
    //   });
      // emit('sureHandle',Object.assign({},{...ruleForm.value}))
    //   close();
    }
  });
};

const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value?.resetFields();
};
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请选择字段", trigger: "blur" }],
  comp: [{ required: true, message: "请选择类型", trigger: "blur" }],
  region: [{ required: true, message: "请选择数据来源", trigger: "blur" }],
});
</script>

<style lang="scss" scoped></style>
